<template>
  <view class="classify-container">
    <view class="title">电影分类</view>
    <view class="search-bar">
      <input
        class="search-input"
        type="text"
        v-model="iptValue"
        placeholder="搜索电影名"
        @confirm="onSearch"
      />
      <button class="search-btn" @click="onSearch">搜索</button>
    </view>
    <view class="category-list">
      <view
        class="category-item"
        v-for="(cat, idx) in categories"
        :key="idx"
        @click="selectCategory(cat)"
        :class="{ active: cat === selectedCategory }"
      >
        {{ cat }}
      </view>
    </view>
    <view class="movie-list">
      <view
        class="movie-item"
        v-for="movie in filteredMovies"
        :key="movie.name"
      >
        <image :src="movie.img" class="movie-img" mode="aspectFill"></image>
        <view class="movie-name">{{ movie.name }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onUnmounted, watch } from 'vue'

const categories = ref(['全部', '动作', '喜剧', '爱情', '科幻', '动画', '悬疑'])
const selectedCategory = ref('全部');
const searchKey = ref('');
const searchVal = ref('');
const iptValue = ref("");

// 防抖计时器
let debounceTimer = null

const hotMovies = ref([
  { name: '八角笼中', img: '/static/1.png', category: '动作,喜剧' },
  { name: '疯狂的外星人', img: '/static/2.png', category: '喜剧' },
  { name: '你的名字', img: '/static/3.png', category: '爱情' },
  { name: '流浪地球', img: '/static/4.png', category: '科幻' },
  { name: '熊出没', img: '/static/5.png', category: '动画' },
  { name: '误杀', img: '/static/6.png', category: '悬疑' },
  { name: '夏洛特烦恼', img: '/static/7.png', category: '喜剧' },
  { name: '哪吒之魔童降世', img: '/static/8.png', category: '动画' },
  { name: '唐人街探案', img: '/static/9.png', category: '悬疑' }
])

// const filteredMovies = computed(() => {
//   let list = hotMovies.value
//   if (selectedCategory.value !== '全部') {
//     list = list.filter(m => m.category === selectedCategory.value)
//   }
//   if (searchVal.value) {
//     list = list.filter(m => m.name.includes(searchVal.value))
//   }
//   return list
// })


function selectCategory(cat) {
  selectedCategory.value = cat
}

const filteredMovies = computed(() => {
  let list = hotMovies.value;
  // 分类过滤
  if (selectedCategory.value !== '全部') {
    list = list.filter(m => m.category === selectedCategory.value);
  }
  // 搜索过滤
  if (searchKey.value) {
    list = list.filter(m => m.name.includes(searchKey.value));
  }
  return list;
});

// 防抖处理的搜索函数
function onSearch() {
  searchVal.value = searchKey.value.trim();
}


watch(iptValue, (val) => {
  const timer = setTimeout(() => {
	  //alert(val.trim)
    searchKey.value = val.trim();
  }, 300); // 300ms防抖
  return () => clearTimeout(timer);
});
</script>

<style lang="scss" scoped>
.classify-container {
  min-height: 100vh;
  background: #f7f7f7;
  padding: 30rpx 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  color: #222;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  gap: 12rpx;
}
.search-input {
  flex: 1;
  height: 48rpx;
  border-radius: 24rpx;
  border: none;
  background: #fff;
  font-size: 28rpx;
  padding: 0 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.search-btn {
  height: 48rpx;
  padding: 0 30rpx;
  background: #2B9939;
  color: #fff;
  border: none;
  border-radius: 24rpx;
  font-size: 28rpx;
  /* 新增：确保按钮文字居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 移除默认内边距影响 */
  line-height: 1;
}
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx;
  margin-bottom: 30rpx;
}
.category-item {
  padding: 12rpx 32rpx;
  background: #fff;
  border-radius: 24rpx;
  font-size: 28rpx;
  color: #666;
  border: 2rpx solid #eee;
  transition: all 0.2s;
}
.category-item.active {
  background: #2B9939;
  color: #fff;
  border-color: #2B9939;
}
.movie-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  justify-content: flex-start;
}
.movie-item {
  width: 44%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  margin-bottom: 18rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10rpx;
}
.movie-img {
  width: 100%;
  height: 220rpx;
  border-radius: 12rpx 12rpx 0 0;
  object-fit: cover;
}
.movie-name {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #333;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>